<template>
  <div>
      <el-card>
        <!-- 搜索区域 -->
        <el-row class="form-area">
          <el-col :span="4">
            <label for="">类型:</label>
            <el-select v-model="searchForm.categoryId" placeholder="请选择" class="type-input">
      <el-option :label="item.category_name" :value="item.id" v-for="item in infoCate" :key="item.id"></el-option>
    </el-select>
          </el-col>
          <el-col :span="6">
            <label for="">日期:</label>
            <el-date-picker
      v-model="searchForm.timeRange"
      type="datetimerange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      class="time-selector">
    </el-date-picker>
          </el-col>
          <el-col :span="3">
            <label for="">关键字:</label>
            <el-select v-model="searchForm.key" placeholder="请选择" class="key-input">
      <el-option label="id" value="id"></el-option>
      <el-option label="关键词" value="title"></el-option>
    </el-select>
          </el-col>
           <el-col :span="7">
             <el-input placeholder="请输入内容" class="content-input" v-model="searchForm.content"></el-input>
             <el-button type="danger" @click="searchInfo">搜索</el-button>
             <el-button type="danger" @click="showAddInfoDialog('add')">新增</el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
          <el-table
    :data="tableData.data"
    border
    style="width: 100%"
     v-loading="dataLoading"
     @selection-change="handleSelectionChange">
     <el-table-column
      type="selection"
      width="50">
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="460"
      align="center">
    </el-table-column>
    <el-table-column
      prop="categoryId"
      label="类别"
      align="center"
      :formatter="formatType"
      width="60">
    </el-table-column>
    <el-table-column
      prop="createDate"
      label="日期"
      align="center"
      :formatter="formatTime">
    </el-table-column>
    <el-table-column
      prop="id"
      label="管理人"
      align="center"
      width="60">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      width="220">
      <template slot-scope="slotProps">
        <el-button type="danger" size="mini" @click="removeInfoItem(slotProps.row.id)" v-btnPermit="'info.delete'" v-if="$btnPermit('info.delete')">删除</el-button>
        <el-button type="success" size="mini"  @click="showAddInfoDialog('edit', slotProps.row)" v-btnPermit="'info.edit'">编辑</el-button>
        <el-button type="warning" size="mini" @click="toDetail(slotProps.row.id)" >详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row class="bottom-bar">
    <el-col :span="3">
      <el-button @click="removeManyInfo">批量删除</el-button>
    </el-col>
    <el-col :span="8">
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-col>
  </el-row>
      </el-card>
      <Dialog :visible="dialogVisible" @close="closeDialog" :cate="infoCate" :getInfo="getInfo" :type="dialogType" :infoItem="infoItem.data"/>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from '@vue/composition-api'
import { global } from '@/utils/global.js'
import Dialog from './dialog/index'
import { getInfoList, deleteInfo } from '@/api/info.js'
import timeFormatter from '@/utils/timeFormatter.js'
export default {
  name: 'infoList',
  components: {
    Dialog
  },
  setup (props, { root }) {
    const { confirm: confirmRemove } = global()
    // 信息分类
    const infoCate = computed(() => root.$store.state.infoCate.cateList)
    const getCate = () => {
      if (!root.$store.state.infoCate.cateList.length) {
        root.$store.dispatch('infoCate/getCateList')
      }
    }
    // 搜索信息表单
    const searchForm = reactive({
      categoryId: '',
      timeRange: null,
      key: '',
      content: ''
    })
    const searchInfo = async () => {
      if (searchForm.categoryId) {
        query.categoryId = searchForm.categoryId
      }
      if (searchForm.timeRange) {
        query.startTiem = timeFormatter(searchForm.timeRange[0].getTime())
        query.endTime = timeFormatter(searchForm.timeRange[1].getTime())
      }
      if (searchForm.key) {
        query[searchForm.key] = searchForm.content
      }
      query.pageNumber = 1
      getInfo()
    }
    // 表格数据
    const dataLoading = ref(true)
    const tableData = reactive({
      data: []
    })
    const query = reactive({
      categoryId: '',
      startTiem: '',
      endTime: '',
      title: '',
      id: '',
      pageNumber: 1,
      pageSize: 5
    })
    const getInfo = async () => {
      dataLoading.value = true
      const requestParams = { ...query }
      // console.log(requestParams)
      const { data: res } = await getInfoList(requestParams)
      console.log(res)
      tableData.data = res.data.data
      total.value = res.data.total
      dataLoading.value = false
    }
    const formatType = (row) => {
      // console.log(infoCate)
      if (infoCate.value.length === 0) return
      // console.log(infoCate)
      let cateName = ''
      const cateItem = infoCate.value.find(item => item.id === row.categoryId)
      cateName = cateItem.category_name
      return cateName
    }
    const formatTime = (row) => {
      return timeFormatter(row.createDate)
    }
    // 分页功能
    const pageSize = ref(5)
    const currentPage = ref(1)
    const total = ref(0)
    const handleSizeChange = (size) => {
      query.pageSize = size
      pageSize.value = size
      getInfo()
    }
    const handleCurrentChange = (page) => {
      query.pageNumber = page
      currentPage.value = page
      getInfo()
    }

    // 删除信息
    const removeInfoItem = (id) => {
      confirmRemove({
        id,
        async success (id) {
          const requestParams = {
            id: [id]
          }
          const { data: res } = await deleteInfo(requestParams)
          getInfo()
          return res
        }
      })
    }
    const removeManyInfo = () => {
      confirmRemove({
        id: selectInfoId,
        async success (id) {
          const requestParams = {
            id
          }
          const { data: res } = await deleteInfo(requestParams)
          getInfo()
          return res
        }
      })
    }
    let selectInfoId = []
    const handleSelectionChange = (val) => {
      selectInfoId = val.map(item => item.id)
      console.log(selectInfoId)
    }
    // 对话框
    const dialogVisible = ref(false)
    const dialogType = ref('')
    const infoItem = reactive({
      data: {}
    })
    const showAddInfoDialog = (type, item) => {
      dialogType.value = type
      if (item) {
        infoItem.data = item
      }
      dialogVisible.value = true
    }
    const closeDialog = () => {
      // console.log(1)
      dialogVisible.value = false
      dialogType.value = ''
    }
    // 去往编辑详情
    const toDetail = (id) => {
      // console.log(id)
      root.$router.push({
        path: `/infodetail/${id}`
      })
    }
    onMounted(() => {
      getInfo()
      getCate()
    })
    return {
      searchForm,
      tableData,
      handleSizeChange,
      handleCurrentChange,
      pageSize,
      total,
      currentPage,
      removeInfoItem,
      showAddInfoDialog,
      dialogVisible,
      closeDialog,
      infoCate,
      dataLoading,
      formatType,
      formatTime,
      getInfo,
      handleSelectionChange,
      dialogType,
      infoItem,
      removeManyInfo,
      searchInfo,
      toDetail
    }
  }

}
</script>

<style lang="scss" scoped>
.form-area {
  font-size: 12px;
  .type-input {
  width: 80%;
  margin-left: 10px;
}
.time-selector {
  width: 280px !important;
  margin-left: 15px;
}
.key-input {
  width: 90px;
}
.content-input {
  width: 200px;
  padding-right: 20px;
}
}
.el-table {
  margin-top: 15px;
}
.bottom-bar {
  margin-top: 15px;
}
</style>
